import React, {useEffect, useRef, useState} from 'react';
import {StyleSheet, View, Image, Text, ImageBackground} from 'react-native';

import bg_card from '../assets/images/bg_card.png';
import icon_bank from '../assets/images/icon_bank.png';

const ImageBackgroundDemo7_5 = () => {
  return (
    <View style={styles.root}>
      <Text style={{color: 'orange', fontSize: 20, textAlign: 'center'}}>
        7_5ImageBackgroundDemo
      </Text>

      <ImageBackground
        style={styles.viewStyle}
        imageStyle={styles.imgStyle}
        source={bg_card}>
        <Image style={styles.icon_logo} source={icon_bank} />

        <View style={styles.cardInfoStyle}>
          <Text style={styles.txtBank}>招商银行</Text>
          <Text style={styles.cardTypeTxt}>储蓄卡</Text>
          <Text style={styles.cardNoTxt}>{`••••   ••••   ••••   3068`}</Text>
        </View>
      </ImageBackground>
    </View>
  );
};

export default ImageBackgroundDemo7_5;

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 'auto',
    flexDirection: 'column',
  },
  viewStyle: {
    width: '100%',
    height: 150,
    flexDirection: 'row',
    alignItems: 'flex-start', // 交叉轴方向，交叉轴的起点对齐。
    justifyContent: 'flex-start', //主轴方向，主轴方向的起点 （左对齐-默认）
  },
  imgStyle: {
    resizeMode: 'cover',
    borderRadius: 12,
  },

  icon_logo: {
    width: 48,
    height: 48,
    borderRadius: 24,
    marginLeft: 20,
    marginTop: 20,
  },
  cardInfoStyle: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    marginLeft: 10,
  },
  txtBank: {
    fontSize: 24,
    color: 'white',
    marginTop: 21,
    fontWeight: 'bold',
  },
  cardTypeTxt: {
    fontSize: 20,
    color: '#FFFFFFA0',
    fontWeight: 'normal',
  },
  cardNoTxt: {
    fontSize: 20,
    color: 'white',
    marginTop: 30,
    letterSpacing: 2,
  },
});
